Bootstrap Snippet image animation with gsap using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
<div class="parent">
  <img class="image" id="box" src="https://placeimg.com/640/480/nature" alt="" />
  <div class="cover"></div>
</div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script>
TweenMax.staggerFrom(".cover", 3, {y: 1000, ease:Power2.easeInOut}, 2); 
TweenMax.staggerFrom(".image", 1.8, {force3D: true,autoAlpha: 0,overflow: "hidden",x: "-480px",width: "0px",height: "480px", ease:Power2.easeInOut, scale: 1.35, delay: 1.7}, 0.9);
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.parent {
  position: relative;
  overflow: hidden;
  height: 480px;
  width: 640px;
}
.cover {
  transform-origin: left;
  height: 480px;
  background-color: #333;
  position: absolute;
  top: -640px;
  display: block;
  width: 640px;
}
.image {
  opacity: 1;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"image animation with gsap"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"image animation with gsap" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"image animation with gsap"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY